<template lang="pug">
  el-row
    el-col(:span="24")
      .grid-content
        .funds
          .title
            span 账户余额 (元)
            span 15000.00
          .recharge
            el-button(plain) 充值
        hr
        .fund-title 交易记录
          span 共3条
        .fund-filter
          el-date-picker(v-model="date1", type="datetime", placeholder="开始时间", style="width:250px;margin-right:20px")
          span(style="margin-right:20px") 至
          el-date-picker(v-model="date2", type="datetime", placeholder="结束时间", style="width:250px;margin-right:20px")
          el-select(v-model="status", placeholder="交易类型", style="width:250px;margin-right:20px")
            el-option(label="全部", value="1")
            el-option(label="充值", value="2")
            el-option(label="创建红包", value="3")
            el-option(label="创建红包手续费", value="4")
            el-option(label="红包退还", value="5")
            el-option(label="手续费退还", value="6")
          el-select(v-model="status", placeholder="交易状态", style="width:250px;margin-right:20px")
            el-option(label="全部", value="1")
            el-option(label="待转账", value="2")
            el-option(label="待审核", value="3")
            el-option(label="审核不通过", value="4")
            el-option(label="交易成功", value="5")
          el-button.el-table__fixed-right 导出交易数据
        .fund-date
          el-table(:data="tableData", :stripe="true", :border="false", style="width: 100%")
            el-table-column(prop="fundId", label="", width="65")
            el-table-column(prop="fundType", label="交易类型", width="300")
            el-table-column(prop="fundAmount", label="金额 (元)", width="180")
            el-table-column(prop="fundSource", label="来源/去向", width="180")
            el-table-column(prop="fundBalance", label="账户余额 (元)", width="180")
            el-table-column(prop="fundTime", label="交易时间", width="180")
            el-table-column(prop="fundStatus", label="交易状态", width="180")
            el-table-column(label="操作", width="350", class-name="operate")
              template(slot-scope="scope")
                template(v-if="scope.row.fundOperate")
                  el-button.operate-button 查看收款方信息
                  el-button.operate-button 上传转账凭证
                template(v-if="!scope.row.fundOperate")
                  span --
</template>

<script>
  export default {
    data() {
      return {
        status: '',
        date1: '',
        date2: '',
        tableData: [{
          fundId: 1,
          fundType: '充值',
          fundAmount: '+100000.00',
          fundSource: '支付宝',
          fundBalance: '15000.00',
          fundTime: '2018-08-15  10:00:00',
          fundStatus: '交易成功',
          fundOperate: false
        },{
          fundId: 2,
          fundType: '充值',
          fundAmount: '+100000.00',
          fundSource: '支付宝',
          fundBalance: '15000.00',
          fundTime: '2018-08-15  10:00:00',
          fundStatus: '审核不通过',
          fundOperate: true
        },{
          fundId: 1,
          fundType: '充值',
          fundAmount: '+100000.00',
          fundSource: '支付宝',
          fundBalance: '15000.00',
          fundTime: '2018-08-15  10:00:00',
          fundStatus: '交易成功',
          fundOperate: false
        },{
          fundId: 2,
          fundType: '充值',
          fundAmount: '+100000.00',
          fundSource: '支付宝',
          fundBalance: '15000.00',
          fundTime: '2018-08-15  10:00:00',
          fundStatus: '审核不通过',
          fundOperate: true
        },{
          fundId: 1,
          fundType: '充值',
          fundAmount: '+100000.00',
          fundSource: '支付宝',
          fundBalance: '15000.00',
          fundTime: '2018-08-15  10:00:00',
          fundStatus: '交易成功',
          fundOperate: false
        },{
          fundId: 2,
          fundType: '充值',
          fundAmount: '+100000.00',
          fundSource: '支付宝',
          fundBalance: '15000.00',
          fundTime: '2018-08-15  10:00:00',
          fundStatus: '审核不通过',
          fundOperate: true
        }]
      }
    },
    mounted: function() {
      this.$nextTick(() => {
        document.querySelector('.el-main').style.background = '#fff';
      });
    },
  }
</script>
<style lang="scss">
  .grid-content {
    .funds {
      display: flex;
      margin-bottom: 20px;
      .title {
        width: 200px;
        span {
          display: block;
          width: 100%;
          &:first-child {
            font-size: 18px;
            font-weight: 600;
          }
          &:last-child {
            font-size: 30px;
            font-weight: 800;
            color: $main-style-red;
          }
        }
      }
      .recharge {
        align-self: center;
        button {
          width: 140px;
          background-color: $main-style-red;
          color: #fff;
        }
      }
    }
    .fund-title {
      font-size: 18px;
      font-weight: 800;
      span {
        font-size: 13px;
        color: #999;
        font-weight: 500;
        margin-left: 20px;
      }
    }
    .fund-filter {
      position: relative;
      margin-top: 20px;
      .el-table__fixed-right {
        right: 20px;
        background-color: $main-style-red;
        color: #fff;
      }
    }
    .fund-date {
      margin-top: 20px;
      td, th {
        border: 1px solid #ebeef5;
      }
      .operate-button {
        padding: 4px 10px;
        background-color: $main-style-red;
        color: #fff;
      }
    }
  }
</style>
